<template>
  <el-dialog :title="dialogTitle" :visible.sync="parentVisible" :before-close="closeDialog" :close-on-click-modal="false" width="500px">
    <el-form ref="parentForm" :model="parentForm" :rules="rules">
      <el-form-item label="一级品类：" label-width="120px" prop="name">
        <el-input v-model="parentForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="上传封面：" label-width="120px" prop="image">
        <crop-upload show-type="photo" :init-val="parentForm.image" file-size="100K" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl(val)" />
      </el-form-item>
      <!-- <el-form-item
        label="图片链接："
        label-width="120px"
        prop="link"
      >
        <el-input
          v-model="parentForm.link"
          autocomplete="off"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="状态:" label-width="110px" prop="enabled">
        <el-radio v-model="parentForm.enabled" :label="1">显示</el-radio>
        <el-radio v-model="parentForm.enabled" :label="0">隐藏</el-radio>
      </el-form-item>
      <el-form-item label="排序：" label-width="120px" prop="displayorder">
        <el-input v-model="parentForm.displayorder" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm('parentForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: {
    dialogTitle: {
      type: String,
      default: ''
    },
    parentVisible: {
      type: Boolean,
      default: false
    },
    parentForm: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    parentVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.parentForm.clearValidate()
        })
      }
    }
  },
  data() {
    var checkNum = (rule, value, callback) => {
      const reg = /^[0-9]\d*$/
      if (!value && value !== 0) {
        callback(new Error('请输入数字'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        name: [
          { required: true, message: '请输入一级品类名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        enabled: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        link: [
          { required: true, message: '请输入链接', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请上传封面', trigger: 'change' }
        ],
        displayorder: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog(param) {
      this.$emit('closeDialog', param)
    },
    setUrl(val) {
      this.parentForm.image = val
      this.$emit('setUrl', val)
    },
    submitForm(formName) {
      var strRegex = '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var reg = new RegExp(strRegex)
          // if (this.parentForm.link) {
          //   console.log('33')
          //   if (!reg.test(this.parentForm.link)) {
          //     this.$message.error("请确保图片链接正确");
          //     return false;
          //   } else {
          this.$emit('submitForm', true)
          //   }
          // }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>
